<template>
  <div>
    <div class="top" :class="{height: showGe}">
      <div v-if="!showGe" class="ge1">
        <img :src="baseUrl + banner" alt="">
      </div>
      <div v-else class="ge">
        <div v-html="mad"></div>
      </div>
      <div v-show="!show" class="bofangqi">
        <div ref="J_prismPlayer" id="J_prismPlayer" class="prism-player"></div>
        <div class="controller" v-if="!show && load">
          <div class="img" @click="change(0)">
            <img src="../assets/icon/next.svg" alt="">
          </div>
          <div class="img bofang" @click="toggleBofang">
            <img v-if="paused" src="../assets/icon/bofanganniu.svg" alt="">
            <img v-else src="../assets/icon/zanting.svg" alt="">
          </div>
          <div class="img" @click="change(1)">
            <img src="../assets/icon/xiayiye.svg" alt="">
          </div>
          <div class="geci" @click="changeGe">
            <img v-if="!showGe" src="../assets/icon/geci.svg" alt="">
            <img v-else src="../assets/icon/guanbigeci.svg" alt="">
          </div>
        </div>
      </div>
      <p v-if="show && load" @click="free">免费试听</p>
    </div>
    <div class="list">
      <div :class="{active: which_to_show == 'Jie'}" @click="showJie()">课程介绍</div>
      <div :class="{active: which_to_show == 'Mu'}" @click="showMu()">课程目录</div>
      <div :class="{active: which_to_show == 'Pin'}" @click="showPin()">评价</div>
    </div>
    <component
      v-bind:is="which_to_show"
      :id="id"
      :detail="detail"
      @change="getV"
      :active.sync="active"
    ></component>
  </div>
</template>
<script>
import Jie from "@/views/kejie.vue";
import Mu from "@/views/kemu.vue";
import Pin from "@/views/pinjia.vue";
import APlayer from "aplayer";
import { wxShare } from "@/mixin/share";
import cookies from "vue-cookies";
export default {
  name: "kecheng",
  components: {
    Jie,
    Mu,
    Pin
  },
  mixins: [wxShare],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASEURL,
      which_to_show: "Jie",
      activeName: "a",
      player: "",
      detail: {},
      show: true,
      link: "",
      load: false,
      showGe: false,
      banner: "",
      active: "",
      paused: true,
      mad: "",
      playUrl: ""
    };
  },
  props: ["id"],
  async mounted() {
    let res = await this.$http.post(`api/index/video_introduce`, {
      course_id: this.id
    });
    this.detail = res.data;
    let res2 = await this.$http.post(`api/index/get_playAuth`, {
      course_id: this.id
    });
    this.mad = res2.data.mad;
    this.active = res2.data.lessonId;
    this.banner = res2.data.img;
    this.playUrl = res2.data.PlayURL;
    if (res.data.is_buy) {
      this.player = new APlayer({
        container: this.$refs.J_prismPlayer,
        autoplay: true,
        loop: "none",
        audio: [
          {
            url: res2.data.PlayURL
          }
        ]
      });

      let _this = this;
      WeixinJSBridge.invoke("getNetworkType", {}, function(e) {
        // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
        // alert(e.err_msg);
        console.log(1);
        _this.player.play();
        _this.paused = _this.player.audio.paused;
      });
      this.player.on("ended", function() {
        _this.change(1);
      });
      this.show = false;
    } else {
      this.show = true;
    }
    this.load = true;
  },

  beforeRouteLeave(to, from, next) {
    if (this.player) {
      this.player.destroy();
    }
    next();
  },
  methods: {
    async change(i) {
      let res = await this.$http.post(`api/index/get_next`, {
        lesson_id: this.active,
        type: i
      });
      if (res) {
        this.player.list.add([
          {
            url: res.data.PlayURL
          }
        ]);
        this.player.list.switch(1);
        this.player.list.remove(0);
        this.active = res.data.lessonId;
        this.player.play();
        this.paused = this.player.audio.paused;
        this.banner = res.data.img;
        this.mad = res.data.mad;
      }
    },
    toggleBofang() {
      this.player.toggle();
      this.paused = this.player.audio.paused;
    },
    changeGe() {
      window.scroll(0, 0);
      this.showGe = !this.showGe;
    },
    async getV(id) {
      this.show = false;
      if (this.player && id == this.active) {
        this.player.play();
        this.paused = this.player.audio.paused;
        return;
      }
      let res2 = await this.$http.post(`api/index/get_playAuth`, {
        course_id: this.id,
        lesson_id: id
      });
      if (res2 && this.player) {
        this.player.list.add([
          {
            url: res2.data.PlayURL
          }
        ]);
        this.player.list.switch(1);
        this.player.list.remove(0);
        this.active = id;
        this.banner = res2.data.img;
        this.mad = res2.data.mad;
        this.player.play();
        this.paused = this.player.audio.paused;
      } else if (res2) {
        this.player = new APlayer({
          container: this.$refs.J_prismPlayer,
          autoplay: true,
          loop: "none",
          audio: [
            {
              url: res2.data.PlayURL
            }
          ]
        });
        let _this = this;
        WeixinJSBridge.invoke("getNetworkType", {}, function(e) {
          // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
          // alert(e.err_msg);
          console.log(1);
          _this.player.play();
          _this.paused = _this.player.audio.paused;
        });
        this.player.on("ended", function() {
          _this.change(1);
        });
        this.show = false;
        this.player.play();
        this.mad = res2.data.mad;
        this.active = res2.data.lessonId;
        this.banner = res2.data.img;
        this.playUrl = res2.data.PlayURL;
      }
    },
    showJie() {
      this.which_to_show = "Jie";
    },
    showMu() {
      this.which_to_show = "Mu";
    },
    showPin() {
      this.which_to_show = "Pin";
    },
    async free() {
      let _this = this;
      this.player = new APlayer({
        container: this.$refs.J_prismPlayer,
        autoplay: true,
        loop: "none",
        audio: [
          {
            url: _this.playUrl
          }
        ]
      });
      WeixinJSBridge.invoke("getNetworkType", {}, function(e) {
        console.log(1);
        _this.player.play();
        _this.paused = _this.player.audio.paused;
      });
      this.player.on("ended", function() {
        _this.change(1);
      });
      this.show = false;
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.van-nav-bar {
  text-align: left;
  background: rgba(242, 242, 242, 1);
}
.van-nav-bar__left .van-nav-bar__text {
  color: black;
  font-size: 3rem;
}
.van-nav-bar__title {
  max-width: 70%;
  margin-left: 50px;
}
.van-icon,
.van-icon::before {
  font-size: 20px;
  color: black;
}
.van-icon-arrow:before {
  font-size: 1.5rem;
  color: rgba(210, 210, 210, 1);
}
.van-cell {
  padding: 20px 16px;
}
.van-cell__left-icon {
  font-size: 0.5rem;
}
.van-cell__title {
  font-family: PingFang SC;
  font-size: 1rem;
}
.top {
  width: 100%;
  height: 276px;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.2s linear;
  z-index: 1000;
}
.height {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.ge {
  flex: 1;
  overflow: scroll;
  text-align: center;
  position: relative;
}
.ge1 {
  flex: 1;
  overflow: hidden;
}
.ge > div {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.top p {
  width: 150px;
  height: 50px;
  background: #0b19fe;
  font-size: 15px;
  color: #f2f2f2;
  text-align: center;
  line-height: 50px;
  border-radius: 25px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.list {
  height: 52px;
  padding: 0 15px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f3f3f3;
}
.list > div {
  width: 66px;
  text-align: center;
}
.list div {
  line-height: 52px;
  position: relative;
}
.list .active::after {
  content: "";
  width: 66px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50%;
  background: #334fff;
}
.list {
  height: 52px;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
}
.list .active {
  color: #334fff;
}
.list li:hover {
  border-bottom: 3px solid #334fff;
}
.bofangqi {
  position: relative;
  height: 66px;
}
.controller {
  position: absolute;
  width: 210px;
  left: 50%;
  top: 5px;
  height: 40px;
  transform: translate(-50%);
  display: flex;
  justify-content: space-around;
}
.controller .img {
  width: 25px;
}
.controller .bofang {
  height: 40px;
  width: 40px;
}
.geci {
  position: absolute;
  right: -50px;
  width: 30px;
  height: 30px;
}
.ge > img {
  height: 210px;
}
</style>
